<script lang="ts" setup name="systemRole">
import { urls, getListByConditionsWithPage } from '@/index';
import type { DialogModel, DrawerModel, Menu, Role, RoleQueryCondition } from '@/index.d';
import { useRequest } from 'vue-request';
import RoleDetailDialog from './RoleDetailDialog.vue';
import PermissionDispatchDrawer from './PermissionDispatchDrawer.vue';

const title = '角色';

const roleQueryCondition = reactive<RoleQueryCondition>({
  change: false,
  currentPage: 1,
  pageSize: 20,
  deleted: false
});

const resetRoleQueryCondition = () => {
  roleQueryCondition.change = false;
  roleQueryCondition.currentPage = 1;
  roleQueryCondition.pageSize = 20;
  delete roleQueryCondition.type;
  delete roleQueryCondition.name;
  delete roleQueryCondition.description;
};

const {
  data: roleListWithPage,
  loading,
  run: getRoleListWithPage
} = useRequest(() => getListByConditionsWithPage(urls.role, roleQueryCondition));

// 监控搜索栏目中的下拉菜单的变化，当有变化时，重新查询数据
watch(
  () => roleQueryCondition.type,
  () => getRoleListWithPage()
);

const handleResetQuery = () => {
  resetRoleQueryCondition();
  getRoleListWithPage();
};

// 监控搜索栏目中的下拉菜单的变化，当有变化时，重新查询数据
watch(
  () => [roleQueryCondition.type],
  () => getRoleListWithPage()
);

// 传递给RoleDetailDialog对话框的值
const roleDetailDialogModel = reactive<DialogModel<Role>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => roleDetailDialogModel.visible,
  value => {
    if (!value && roleDetailDialogModel.change) {
      getRoleListWithPage();
      roleDetailDialogModel.change = false;
    }
  }
);

// 传递给ButtonDispatcherDrawer对话框的值
const buttonDispatcherDrawerModel = reactive<DrawerModel<Menu>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

const currentRole = reactive<Role>({});

const showButtonDispatch = (role: Role) => {
  if (role.type === '内置') {
    ElMessage.error('不能为内置角色分配权限');
  } else {
    buttonDispatcherDrawerModel.visible = true;
    buttonDispatcherDrawerModel.id = role.id as number;
    buttonDispatcherDrawerModel.title = role.name as string;
    currentRole.id = role.id;
    currentRole.name = role.name;
    currentRole.description = role.description;
    currentRole.type = role.type;
  }
};
</script>
<template>
  <hq-container-table
    :title
    :loading
    :base-url="urls.role"
    :total="roleListWithPage?.total"
    :table-data="roleListWithPage?.records"
    operate-column
    v-model:page-size="roleQueryCondition.pageSize"
    v-model:current-page="roleQueryCondition.currentPage"
    @handle-query="getRoleListWithPage"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getRoleListWithPage"
    v-model:detail-dialog-model="roleDetailDialogModel"
  >
    <template #search>
      <hq-col kind="search">
        <el-select v-model="roleQueryCondition.type" placeholder="请选择角色类型" clearable>
          <el-option label="自定义" value="自定义" />
          <el-option label="内置" value="内置" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input v-model="roleQueryCondition.name" placeholder="请输入角色名称" clearable />
      </hq-col>
      <hq-col kind="search">
        <el-input v-model="roleQueryCondition.description" placeholder="请输入角色描述" clearable />
      </hq-col>
    </template>
    <template #button> </template>
    <template #tableColumns>
      <hq-table-column label="权限分配" width="150px">
        <template #default="{ row }">
          <el-button
            type="success"
            link
            @click="showButtonDispatch(row)"
            v-if="row.type !== '内置'"
          >
            分配权限
          </el-button>
        </template>
      </hq-table-column>
      <hq-table-column prop="name" label="名称" />
      <hq-table-column prop="description" label="描述" />
      <hq-table-column prop="type" label="类型" />
    </template>
    <template #pagination></template>
  </hq-container-table>

  <RoleDetailDialog
    v-model:dialog-model="roleDetailDialogModel"
    v-if="roleDetailDialogModel.visible"
  />

  <PermissionDispatchDrawer
    v-model:drawer-model="buttonDispatcherDrawerModel"
    v-model:current-role="currentRole"
    v-if="buttonDispatcherDrawerModel.visible"
  />
</template>
<style lang="scss" scoped></style>
